<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div></div>
   <span></span>
   <script>
       //1.DOM对象 原生js代码获取过来的对象就是DOM对象
       var myDiv = document.querySelector(`div`);
       var mySpan = document.querySelector(`span`);
       console.dir(myDiv);
       //2.jQuery对象 通过￥把DOM对象进行包装就是jQuery对象
       $(`div`);
       $(`span`);
       console.dir($(`div`));

       //3.jQuery 对象只能使用jQuery的方法，DOM对象使用的是原生的js的属性和方法
       //myDiv.style.display = `none`;
       //$(`div`).style.display = `none`;//$(`div`)是jQuery的对象，不能使用原生js的属性和方法
       //myDiv.hide();//DOM对象不能使用jQuery的方法
       $(`div`).hide();
   </script>
</body>
</html>